<template>
	<view class="container">
		<view class="page-header">
			<view class="page-title">label 标签组件</view>
			<view class="page-desc">用于关联表单元素，点击标签可触发关联元素的行为</view>
		</view>
		
		<view class="content">
	
			<view class="section">
				<view class="section-title">基础用法</view>
				<view class="demo-item">
					<view class="form-item">
						<label for="checkbox1" class="label">点击我选中复选框</label>
						<checkbox id="checkbox1" class="checkbox"></checkbox>
					</view>
					
					<view class="form-item">
						<label for="radio1" class="label">点击我选中单选按钮</label>
						<radio id="radio1" class="radio" name="radioGroup"></radio>
					</view>
				</view>
			</view>
	
			<view class="section">
				<view class="section-title">样式变体</view>
				<view class="demo-item">
					<label class="label-style primary" for="input1">
						<text>主要标签</text>
						<input id="input1" type="text" placeholder="点击标签聚焦" class="input"></input>
					</label>
					
					<label class="label-style success" for="input2">
						<text>成功标签</text>
						<input id="input2" type="text" placeholder="点击标签聚焦" class="input"></input>
					</label>
					
					<label class="label-style warning" for="input3">
						<text>警告标签</text>
						<input id="input3" type="text" placeholder="点击标签聚焦" class="input"></input>
					</label>
				</view>
			</view>
			
			<view class="section">
				<view class="section-title">应用场景</view>
				<view class="application-scene">
					<view class="scene-title">用户协议</view>
					<label class="agreement-label">
						<checkbox class="agreement-checkbox"></checkbox>
						<text class="agreement-text">我已阅读并同意<a href="#" class="link">《用户服务协议》</a>和<a href="#" class="link">《隐私政策》</a></text>
					</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			
		}
	};
</script>

<style>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.page-header {
	padding: 30rpx;
	text-align: center;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.page-title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.page-desc {
	font-size: 26rpx;
	color: #666;
}

.content {
	padding: 0 20rpx;
}

.section {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 25rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 20rpx;
	padding-bottom: 15rpx;
	border-bottom: 1px solid #eee;
}

.demo-item {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.form-item {
	display: flex;
	align-items: center;
	gap: 15rpx;
	padding: 10rpx 0;
}

.label {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.checkbox, .radio {
	transform: scale(0.9);
}


.label-box {
	display: flex;
	align-items: center;
	gap: 15rpx;
	padding: 15rpx;
	border-radius: 6rpx;
	background-color: #f9f9f9;
}

.nested-text {
	font-size: 28rpx;
	color: #333;
}

.nested-checkbox, .nested-radio {
	transform: scale(0.9);
}

/* 样式变体 */
.label-style {
	display: flex;
	align-items: center;
	gap: 15rpx;
	padding: 15rpx 20rpx;
	border-radius: 6rpx;
	margin-bottom: 15rpx;
}

.label-style text {
	font-size: 28rpx;
	color: #fff;
	font-weight: 500;
}

.primary {
	background-color: #007aff;
}

.success {
	background-color: #00cc66;
}

.warning {
	background-color: #ff9500;
}

.input {
	flex: 1;
	height: 60rpx;
	background-color: rgba(255, 255, 255, 0.2);
	border: none;
	border-radius: 4rpx;
	padding: 0 15rpx;
	color: #fff;
	font-size: 26rpx;
}

.input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

/* 应用场景样式 */
.application-scene {
	padding: 15rpx;
}

.scene-title {
	font-size: 20rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.agreement-label {
	display: flex;
	align-items: flex-start;
	gap: 10rpx;
}

.agreement-checkbox {
	margin-top: 5rpx;
	transform: scale(0.9);
}

.agreement-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

.link {
	color: #007aff;
	text-decoration: underline;
}
</style>
